<template>
  <Section padding="0 2rem 0 0rem">
    <GapedColumn gap="middle">
      <PageHeader title="日志概览">
        <template #actions>
          <el-button size="small" plain @click="loadData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </template>
      </PageHeader>

      <StatCards />

      <GapedRow width="100%">
        <div class="item-container">
          <LogLevelChart />
        </div>
        <div class="item-container">
          <LogTypeChart />
        </div>
      </GapedRow>

      <LogTrendChart />
    </GapedColumn>
  </Section>
</template>

<script setup lang="ts">
import PageHeader from '@/components/layout/PageHeader.vue'
import StatCards from '@/components/dashboard/StatCards.vue'
import LogLevelChart from '@/components/dashboard/LogLevelChart.vue'
import LogTypeChart from '@/components/dashboard/LogTypeChart.vue'
import LogTrendChart from '@/components/dashboard/LogTrendChart.vue'
import { Refresh } from '@element-plus/icons-vue'
import useApi from '@/core/apiStore'
import { onMounted } from 'vue'
import { Section, GapedColumn, GapedRow } from '@/core/components'

const apiStore = useApi()

const loadData = () => {
  apiStore.activeSourceIps({})
  apiStore.latestErrors({})
  apiStore.sevenDaysTrend({})
  apiStore.todayLevelDistribution({})
  apiStore.todayTotal({})
  apiStore.todayTypeDistribution({})
  apiStore.typeDistribution({})
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.item-container {
  flex: 1;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: -0.75rem;

  > * {
    padding: 0.75rem;
  }
}

.g-3 {
  margin-bottom: 1rem;
}

.col-md-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .col-md-6 {
    width: 100%;
  }
}
</style>
